<!DOCTYPE html>
<html lang="en">

<head>
  <title>规则详细配置</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
  <link rel="stylesheet" type="text/css" href="../js/handsontable/handsontable.full.min.css">
  <link rel="stylesheet" type="text/css" href="../js/handsontable/main.css">
  <script src="../js/handsontable/handsontable.full.min.js"></script>
  <script src="../js/handsontable/jquery.min.js"></script>
  <script src="../js/handsontable/xlsx.full.min.js"></script>
  <style type="text/css">
    *{
      font-size:14px;
    }
  </style>
</head>

<body>
  <div id="content">
    <div style="padding: 20px; background-color: #F2F2F2;">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-row">
              <div class="layui-col-xs12">
                <div id="example1" class="hot" style="margin-left:5px;"></div>
              </div>
              <div class="layui-col-xs12">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                  <legend>报表模板信息</legend>
                </fieldset>
                <table>
                  <tr>
                    <td cols="2" id="tbInfo"></td>
                  </tr>
                  <tr>
                    <th>列名称</th>
                    <td id="tbColumnInfo"></td>
                  </tr>
                  <tr>
                    <th>行级变量使用</th>
                    <td id="tbRowInfo"></td>
                  </tr>
                  <tr>
                    <th>列级变量使用</th>
                    <td id="tbColInfo"></td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="site-text" style="display: none" id="window" target="test123">
    <div class="layui-tab" lay-filter="tabTest">
      <ul class="layui-tab-title">
        <li>规则列表</li>
        <li class="layui-this" lay-id="tbBase">基础信息</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item">
          <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
        <div class="layui-tab-item layui-show">
          <form class="layui-form" id="book" method="post" lay-filter="formRule" action="ruleConfiguration_edit.html">
            <div class="layui-form-item">
              <label class="layui-form-label">规则名</label>
              <div class="layui-input-block">
                <input type="text" id="bid" name="ruleName" lay-verify="title" autocomplete="off" placeholder="请输入"
                  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">描述</label>
              <div class="layui-input-block">
                <input type="text" id="bname" name="description" lay-verify="title" autocomplete="off" placeholder="请输入"
                  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">类型</label>
              <div class="layui-input-block">
                <select name="type" lay-verify="required">
                  <option value=""></option>
                  <option value="1">行级</option>
                  <option value="2">列级</option>
                  <option value="3">表级</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">级别</label>
              <div class="layui-input-block">
                <select name="type" lay-verify="required">
                  <option value=""></option>
                  <option value="warn">警告</option>
                  <option value="error">错误</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"></label>
              <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch" checked lay-text="启用|禁用" lay-filter="autoplay">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">脚本</label>
              <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="goEditRule">定义</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script type="text/html" id="barDemoEdit">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="goEditRule">去编辑</a>
  </script>

  <script src="../js/layui/layui.js" charset="utf-8"></script>

  <script type="text/javascript">
    var tplInfo = {
      offset : [1, 1], // 报表展示数据开始位置，即偏移位置
      dsColumns : [
        {data : "CELL1", colName : "公司名称"},
        {data : "CELL2", colName : "公司名称2"},
        {data : "CELL3", colName : "公司名称3"},
        {data : "CELL4", colName : "公司名称4"},
        {data : "CELL5", colName : "公司名称5"},
        {data : "CELL6", colName : "公司名称6"}
      ],// 数据列定义
      dsRows : null // 有值，即固定行数
    };
    function doInit() {
      hot.selectCell(tplInfo.offset[0], tplInfo.offset[1]);
      layui.$("#tbInfo").html("报表实际显示位置开始于" + tplInfo.offset);
    }
    


    var data = [
      ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
      ['2017', 10, 11, 12, 13],
      ['2018', 20, 11, 14, 13],
      ['2019', 30, 15, 12, 13]
    ],
    container = document.getElementById('example1'),
    hot;

    hot = Handsontable(container, {
      data: data,
      minRows: 5,
      minCols: 6,
      currentRowClassName: 'currentRow',
      currentColClassName: 'currentCol',
      rowHeaders: true,
      colHeaders: true,
      afterSelection: (row, column, row2, column2, preventScrolling, selectionLayerLevel) => {
        console.log("afterSelection",row, column, row2, column2, preventScrolling, selectionLayerLevel);
        var info = tplInfo.dsColumns[column - tplInfo.offset[1]];
        var rowIdx = row - tplInfo.offset[0];
        
        layui.$("#tbColumnInfo").html(info ? info.colName : "不可用");
        layui.$("#tbRowInfo").html(info ? ("row." + info.data) : "不可用");
        layui.$("#tbColInfo").html(info && rowIdx >= 0  ? ("col[" + rowIdx + "]") : "不可用");
      }
    });

    //hot.selectCell(2, 2);

    layui.use(['layer','table', 'form','element'], function() {
      var table = layui.table;
      var form = layui.form;
      var element = layui.element;
      var formIndex;

      table.render({
        elem : '#test',
        defaultToolbar : [ ],
        cols : [ [ {
          field : 'ruleId',
          title : '规则ID',
          unresize : true,
          width : 80
        }, {
          field : 'ruleName',
          title : '规则名称',
          unresize : true,
          align : 'center'
        },{
          title : '操作',
          toolbar : '#barDemoEdit',
          width : 150
        }
        ] ],
        data : [ {
          ruleId : "R001",
          ruleName : "A报表校验规则1",
          description : "名称不可为空",
          reportId : "AY01",
          reportName : "A报表", // linkdata
          type : "1", // 1-row,2-col,3-table
          targetNames : "name",
          enable : true,
          expression : null
        }, {
          ruleId : "R002",
          ruleName : "A报表校验规则2",
          description : "叫‘张三8’的人，年龄不能大于25",
          reportId : "AY01",
          reportName : "A报表", // linkdata
          type : "1", // 1-row,2-col,3-table
          targetNames : "name,age",
          enable : false,
          expression : null
        } ]
      });

      table.on('tool(test)', function(obj) {
        var data = obj.data;
        if (obj.event === 'goEditRule') {
          form.val("formRule", obj.data);
          layer.title(obj.data.ruleName, formIndex);
          element.tabChange('tabTest', "tbBase");
        }
      });     
      
      //监听提交
      form.on('submit(formRule)', function(data){
        console.log(data)
        return false;
      });

      formIndex = layer.open({
        area : ["700px","100%"],
        type : 1,
        shade : false,
        closeBtn : false,
        offset : "rt",
        title : "规则的详细信息",
        btn : [ "保存" ],
        btn1 : function() {
          layer.msg("ok")
        },
        content: $('#window') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
      });

      doInit();
    });
  </script>
</body>

</html>